<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/mui.min.css" th:href="@{/web/css/mui.min.css}">
	<link rel="stylesheet" href="css/home.css" th:href="@{/web/css/home.css}">
	<link rel="stylesheet" type="text/css" href="css/icons-extra.css" th:href="@{/web/css/icons-extra.css}"/>
	<link rel="stylesheet" type="text/css" href="css/app.css" th:href="@{/web/css/app.css}"/>
	<title>珐码西</title>
	<link href="favicon.ico" type="image/x-icon" rel="icon">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">

	<style>
		.mui-table-view .mui-media-object {
			line-height: 100px;
			max-width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>



<header class="mui-bar mui-bar-nav aui-header b-line">
	<!--<a class=" mui-icon mui-icon-search mui-pull-left" href="search.html"></a>-->
	<h1 class="mui-title">珐码西</h1>
	<!--<a class=" mui-icon mui-icon-chatbubble mui-pull-right" href="dope.html"></a>-->
</header>
<div class="mui-content">
	<div id="slider" class="mui-slider">

		<div class="mui-slider-group mui-slider-loop">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">

				<a href="page.html" th:if="${banner.size()}" th:href="${banner[banner.size()-1].content}" >
					<img src="images/banner.jpg" th:src="@{/upload/__${banner[banner.size()-1].img}__}">
				</a>
			</div>
			<!-- 第一张 -->
			<!--/*@thymesVar id="banner" type="com.example.demo.banner.bean.BannerBean"*/-->
			<div class="mui-slider-item" th:each="banner:${banner}" th:object="${banner}">
				<a th:href="*{content}">
					<img th:src="@{/upload/__*{img}__}">
				</a>
			</div>

			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="page.html" th:href="${banner[0].content}">
					<img src="images/banner.jpg" th:src="@{/upload/__${banner[0].img}__}">
				</a>
			</div>
		</div>
		<div class="mui-slider-indicator" th:each="banner:${banner}">
			<div class="mui-indicator"></div>

		</div>
	</div>
	<div class="aui-nav">
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-sm-3 ">
				<a href="hot.html">
					<span class="aui-cell-img"><img th:src="@{/web/img/aboutme.png}" alt=""></span>
					<div class="mui-media-body">关于我们</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-sm-3 ">
				<a href="new.html">
					<span class="aui-cell-img"><img th:src="@{/web/img/quickbuy.png}" alt=""></span>
					<div class="mui-media-body">快速购买</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-sm-3 ">
				<a href="suit.html">
					<span class="aui-cell-img"><img th:src="@{/web/img/heath.png}" alt=""></span>
					<div class="mui-media-body">健康宣教</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-sm-3 ">
				<a href="kill.html">
					<span class="aui-cell-img"><img th:src="@{/web/img/connectionme.png}" alt=""></span>
					<div class="mui-media-body">联系我们</div>
				</a>
			</li>
		</ul>
	</div>


	<div class="devider t-line"></div>



	<div class="aui-list t-line">


		<ul class="mui-table-view mui-table-view" >
			<li class="mui-table-view-cell  mui-table-view-cell mui-media b-line" th:each="news:${news}" th:object="${news}">
			<div class="mui-slider-handle mui-table"  >
			<a href="javascript:;" >
				<img class="mui-media-object mui-pull-left" th:src="@{/upload/__${news.headerImg}__}" style="max-width: 100px">
				<div class="mui-media-body">

					<p class="mui-ellipsis" style="color: #0C0C0C" th:text="*{title}"></p>
					<p th:utext="*{content}"></p>
				</div>
			</a>
				</div>
			</li>

		</ul>
	</div>
</div>


<div style="height:50px"></div>
<nav class="mui-bar mui-bar-tab">
	<div class="t-line">
		<a href="index.html" class="aui-tab-item mui-active">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a th:href="@{/web/category}" class="aui-tab-item" >
			<span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
			<span class="mui-tab-label">分类</span>
		</a>
		<a class="aui-tab-item" href="car.html" th:href="@{/web/car}">
			<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
			<span class="mui-tab-label">购物车</span>
		</a>
		<a class="aui-tab-item" th:href="@{/web/me}">
			<span class="mui-icon mui-icon-extra mui-icon-extra-people"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</div>

</nav>
<script src="js/mui.min.js"  type="text/javascript" th:src="@{/web/js/mui.min.js}"></script>
<script type="text/javascript" charset="utf-8">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    var slider = mui("#slider");
    document.getElementById("switch").addEventListener('toggle', function(e) {
        if (e.detail.isActive) {
            slider.slider({
                interval: 5000
            });
        } else {
            slider.slider({
                interval: 0
            });
        }
    });
</script>
<script>
    mui.init();
</script>


</body>
</html>